<template>
  <div class="cbody">
    <el-row :gutter="24" style="padding: 5px 10px;background-color: #f6f6f6">
      <el-col :span="21">
        <el-button type="info" @click="copyBill">复制</el-button>
        <el-button type="success" @click="saveEdit">保存</el-button>
      </el-col>
      <el-col :span="3">
        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
          <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
        </el-button-group>
      </el-col>
    </el-row>
    <!-------------------------------表格 ----------------------top ------------------->
    <div class="content">
      <table>
        <tr>
          <td style="width: 100px">楼层</td>
          <td style="width: 100px"><input v-model="form.louceng" class="input50"></td>
          <td style="width: 100px">检查人</td>
          <td style="width: 100px">{{form.createBy}}</td>
          <td style="width: 100px">日期</td>
          <td style="width: 100px">{{form.createTime}}</td>
          <td style="width: 100px">审核/日期</td>
          <td style="width: 100px">{{form.updateBy}}</td>
          <td style="width: 100px">{{form.updateTime}}</td>
        </tr>
        <tr>
          <td colspan="9">制程中巡检项目</td>
        </tr>
        <tr>
          <td>工艺执行</td>
          <td colspan="8" class="textleft">A.下拉是否有工艺文件                B.排拉是否按工艺文件执行 </td>
        </tr>
        <tr>
          <td>特殊要求</td>
          <td colspan="8" class="textleft">C.特殊物料是否正确（阻燃料等）       D.认证产品一致性</td>
        </tr>
        <tr>
          <td rowspan="16">关键岗位核实</td>
          <td rowspan="4">打螺丝岗位</td>
          <td colspan="7" class="textleft">E.检查风批/电批的使用是否符合工艺要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">F.检查风批是否受控</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">G.检测风批力度是否在适宜范围内</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">H.抽查半成品5台，观察是否出现漏打，打爆，打滑，未打紧等情况</td>
        </tr>
        <tr>
          <td rowspan="4">焊锡岗位</td>
          <td colspan="7" class="textleft">I.检查烙铁的使用是否符合工艺要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">J.检查烙铁是否按要求擦拭，锡材的使用是否符合要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">K.询问员工是否明白焊锡质量要求（抽查）</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">L.抽查半成品5台，观察焊点是否饱满，导线2/3部分是否包含在焊点内，用手轻拉焊线，不能出现松动或掉落现象</td>
        </tr>
        <tr>
          <td rowspan="4">LQC岗位</td>
          <td colspan="7" class="textleft">M.检查检测设备的使用是否符合要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">N.检查操作是否符合指导文件的要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">O.检查报表是否及时，足数填写，异常是否按要求上报</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">P.检查5台成品，观察是否满足合格品的要求</td>
        </tr>
        <tr>
          <td rowspan="4">打包岗位</td>
          <td colspan="7" class="textleft">Q.检查打包台是否有上个单的残留物料</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">R.检查包材是否符合《生产通知单》要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">S.检查包装方式是否符合工艺要求</td>
        </tr>
        <tr>
          <td colspan="7" class="textleft">T.抽查5台已装好成品，观察是否符合合格品要求</td>
        </tr>
        <tr>
          <td colspan="9">巡检记录</td>
        </tr>
        <tr>
          <td rowspan="2">线别</td>
          <td rowspan="2">单号</td>
          <td rowspan="2">型号</td>
          <td colspan="5">时间端</td>
          <td rowspan="2">生产确认</td>
        </tr>
        <tr>
          <td>8-10AM</td>
          <td>10-12AM</td>
          <td>13-15PM</td>
          <td>15-17PM</td>
          <td>17-19PM</td>
        </tr>
        <tr v-for="(item1,ind1) in form.jilus" :key="ind1">
          <td><input v-model="item1.xianhao" class="dinput"></td>
          <td><input v-model="item1.danhao" class="dinput"></td>
          <td><input v-model="item1.xinhao" class="dinput"></td>
          <td><input v-model="item1.am810" class="dinput"></td>
          <td><input v-model="item1.pm1012" class="dinput"></td>
          <td><input v-model="item1.pm1315" class="dinput"></td>
          <td><input v-model="item1.pm1517" class="dinput"></td>
          <td><input v-model="item1.pm1719" class="dinput"></td>
          <td><input v-model="item1.queren" class="dinput"></td>
        </tr>
        <tr>
          <td colspan="9">参考信息</td>
        </tr>
        <tr>
          <td rowspan="7">待转拉产品信息</td>
          <td>信号</td>
          <td colspan="4">历史信息</td>
          <td colspan="3">预防方案</td>
        </tr>
        <tr v-for="(entity,ind) in form.cankaos" :key="ind + '1'">
          <td><input v-model="entity.xinhao" class="dinput"></td>
          <td colspan="4"><input v-model="entity.lishixinxi" class="dinput"></td>
          <td colspan="3"><input v-model="entity.yufangfangan" class="dinput"></td>
        </tr>
        <tr>
          <td colspan="9" class="textleft">备注：1.“待转拉产品信息”栏，根据《产品质量汇总》填写第二日计划转拉产品的历史质量信息。
            2.巡检与抽检必须是2小时一次，确保不出批量性问题。
            3.制程中发现有不合格项目，影响到品质的，IPQC通知拉长改善，拉长10分钟内改善不了应上报主管整改
          </td>
        </tr>
      </table>
      <!-------------------------------表格 ----------------------down ------------------->
      <!-------------------------------大表格 ----------------------down ------------------->
      <!-------------------------------div ----------------------down ------------------->
      <div class="condiv">
        <el-upload
          :action="fileUploadURL"
          list-type="picture-card"
          :on-success="handleUploadSuccess"
          :on-preview="handlePictureCardPreview"
          :on-exceed="handleExceed"
          :limit="6"
          :file-list="filList"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { save } from '@/api/rpxunjian'
import { getNext } from '@/api/rpxunjian'
import { getLast } from '@/api/rpxunjian'
import { get } from '@/api/qmilcode'
import { get as getRpxunjian } from '@/api/rpxunjian'
export default {
  name: 'Rpxunjian',
  data() {
    return {
      downtests: ['合格', '不合格', '不适用'],
      dialogVisible: false,
      dialogImageUrl: '',
      editVisible: false,
      filList: [],
      fileURL: process.env.VUE_APP_BASE_API,
      fileUploadURL: process.env.VUE_APP_BASE_API + '/file/upload',
      form: { jilus: [{}, {}, {}, {}, {}, {}, {}, {}], cankaos: [{}, {}, {}, {}, {}, {}] },
      query: {
        sddate: new Date(),
        eddate: new Date(),
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      page: [],
      grades: [0, 0.25, 0.4, 0.65, 1.0, 1.5, 2.5, 4.0, 6.5, 10, 15, 25],
      levels: ['S-1', 'S-2', 'S-3', 'S-4', 'I', 'II', 'III'],
      options: ['/', '√', '×'],
      datas: []
    }
  },
  created() {
    if (this.$route.query.id) {
      this.getInCome(this.$route.query.id)
    }
  },
  methods: {
    getInCome(id) {
      this.loading = true
      getRpxunjian(id).then(res => {
        this.loading = false
        this.form = res.data.data
        this.filList = []
        for (const image of this.form.images) {
          this.filList.push({ url: this.fileURL + image.imgUrl })
        }
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    getData() {
      /* u8query(this.query).then(res => {
        this.page = res.data.page
      })*/
    },
    selTable(row) {
      this.form.cinvcode = row.cInvCode
      this.form.mdepcode = row.MDepCode
      this.form.mocode = row.MoCode
      this.form.moid = row.MoId
      this.form.modid = row.MoDId
      this.form.qty = row.Qty
      if (row.qcyqty) {
        this.form.qcyqty = row.Qty - row.qcyqty
      } else {
        this.form.qcyqty = row.Qty
      }
      this.form.ccomunitname = row.cComUnitName
      this.form.cdepname = row.cDepName
      this.form.cinvname = row.cInvName
      this.form.cinvstd = row.cInvStd
      this.form.ddate = row.dDate
      this.form.socode = row.socode
      this.form.isosid = row.iSOsID
      this.form.csoinvname = row.csoinvname
      this.form.csocode = row.cSOCode
      this.editVisible = true
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getInCome(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getInCome(this.$route.query.id)
        }
      })
    },
    copyBill() {
      this.form.id = null
      this.form.images = null
      this.$message.success('复制成功!')
    },
    saveEdit() {
      console.log(JSON.stringify(this.form))
      save(this.form).then(res => {
        if (res.code === 200) {
          this.form = res.data.rpage
          this.$message.success('保存成功!')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    changeAqla() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先填写质检数量',
          type: 'warning'
        })
        return
      }
      if (this.form.aqla === 0) {
        this.form.aca = 0
        this.form.rea = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqla }
        get(data).then(res => {
          this.form.aca = res.data.data.ac
          this.form.rea = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeAqlb() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先填写质检数量',
          type: 'warning'
        })
        return
      }
      if (this.form.aqlb === 0) {
        this.form.acb = 0
        this.form.reb = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqlb }
        get(data).then(res => {
          this.form.acb = res.data.data.ac
          this.form.reb = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeAqlc() {
      if (!this.form.level) {
        this.$message({
          showClose: true,
          message: '请检测质检等级',
          type: 'warning'
        })
        return
      }
      if (!this.form.qty) {
        this.$message({
          showClose: true,
          message: '请先填写质检数量',
          type: 'warning'
        })
        return
      }
      if (this.form.aqlc === 0) {
        this.form.acc = 0
        this.form.rec = 1
      } else {
        const data = { level: this.form.level, qty: this.form.qty, grade: this.form.aqlc }
        get(data).then(res => {
          this.form.acc = res.data.data.ac
          this.form.rec = res.data.data.re
          this.form = JSON.parse(JSON.stringify(this.form))
        })
      }
    },
    changeLevel() {
      if (this.form.aqla) {
        this.changeAqla()
      }
      if (this.form.aqlb) {
        this.changeAqlb()
      }
      if (this.form.aqlc) {
        this.changeAqlc()
      }
    },
    handleRemove(file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.form.images = images
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed() {
      this.$message({
        showClose: true,
        message: '超出限定图片上传个数',
        type: 'error'
      })
    },
    handleUploadSuccess(res, file, fileList) {
      const images = []
      for (const image of fileList) {
        if (image.response) {
          images.push({ imgUrl: image.response.data.data })
        } else {
          images.push({ imgUrl: image.url.replace(this.fileURL, '') })
        }
      }
      this.form.images = images
    }
  }
}
</script>

<style scoped="sass">
  .cbody{
    background-color: #fcfcfc;
  }
  select{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
  }
  .content{
    margin: 5px auto;
    width: 900px;
    padding: 20px;
    font-size: 14px;
    font-weight: 400;
    background-color: #f7f7f7;
    text-align: center;
  }
  .condiv{
    text-align: left;
    border-width: thin;
    border-color: #c7c7c7;
    border-style: solid;
  }
  table{
    border-collapse: collapse;
    border-color: #c7c7c7;
  }
  td{
    padding: 3px;
    border-style: solid;
    border-width: thin;
    border-color: #c7c7c7;
  }
  .textleft{
    text-align: left;
  }
  .dinput{
    width: 100%;
  }
  .input50{
    border-width: 0 0 1px 0;
    background-color: #f7f7f7 ;
    width: 100px;
  }
</style>
